<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>completeInformation</title>

<!-- 在文件中读取对应的内容 ，并且显示到下拉列表中 -->
<script type="text/javascript">
(function(){
	
	window.onload = init;
	
	var xmlDoc=null;
	
	function init() {
		initDoc();
		//得到父节点对象
		var pn=document.getElementById("type");
		//当父节点变化是，子节点跟随变化
		pn.onchange=getName;
	}
	//子节点变化实现方法
	function getName(){
		var cv=this.value;
		var cn=getParentNode(cv);
		if(cn){
			var cns=cn.getElementsByTagName("tname");
			insertOption("name", cns);
			/**
			var pn=document.getElementById("name");
			pn.options.length=1;
			for(var i=0;i<cns.length;i++){
				var node=document.createElement("option");
				node.text=cns[i].getAttribute("name");//获得属性值
				node.value=cns[i].getAttribute("name");//获得属性
				pn.add(node);
			}*/
		}		
	}
	//得到父节点的属性值,并作比较
	function getParentNode(cv){
		var pns=xmlDoc.getElementsByTagName("type");
		for(var i=0;i<pns.length;i++){
			if(pns[i].getAttribute("value")==cv){
				return pns[i];
			}
		}
		return null;
	}

	//将处理好的对象变成选项的形式插入到下拉列表中
	function insertOption(nodeId,ns){
		var pn=document.getElementById(nodeId);
		pn.options.length=1;	//从第一个元素开始，每次都会清空前一次的内容
		for(var i=0;i<ns.length;i++){
			var node=document.createElement("option");
			node.text=ns[i].getAttribute("name");//获得属性值
			node.value=ns[i].getAttribute("value");//获得属性
			pn.add(node);
		}
	}
	//初始化.xml文档 
	function initDoc() {
		//通过ajax读取Area.xml，并且获取所有的省份内容
		var xhr = createXMLHttpRequest();
		xhr.open("GET","/PythonAndJSP/web/login/hobby.xml",true);
		xhr.onreadystatechange = function() {
			if(xhr.readyState==4&&xhr.status==200) {
				xmlDoc = xhr.responseXML;
				var pns=xmlDoc.getElementsByTagName("type");
				/*
				通过一个字符串结点插入的方式IE不支持
				var ns="";
				for(var i=0;i<pns.length;i++){
					var stud=pns[i].getAttribute("name");
					ns+="<option value='"+stud+"'>"+stud+"</option>";
				}
				var pn=document.getElementById("type");
				pn.innerHTML+=ns;
				*/
				insertOption("type", pns);
			}
		};
		xhr.send();
	}

	//根据节点获取值
	function getValueByProp(node,prop) {
		return (node.getElementsByTagName(prop))[0].firstChild.nodeValue;
	}

	//统一浏览器的兼容性问题
	function createXMLHttpRequest() {
		if(window.XMLHttpRequest) {
			//针对其他主流浏览器
			return new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			//针对IE5和IE6
			return new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			alert("你使用的浏览器不支持XMLHttpRequest，请换一个浏览器再试！");
			return null;
		}
	}
	})();
</script>
<style type="text/css">

#name,#type{
	width: 200px;
}

</style>
</head>
<body>
	<!-- 头部 -->
	<div>
	
	</div>
	
	<!-- 中部 -->
	<div>
		<form action="/PythonAndJSP/CompleteInfoServlet">
			<span>请完善您的相关信息</span>
			<br>
			<span>类型：</span>
			<!-- 选择框 -->
			<select id="type" name="type">
				<option>请选择类型</option>
			</select>
			<br>
			<span>名称：</span>
			<!-- 选择框 -->
			<select id="name" name="name">
				<option>请选择对象</option>
			</select>
			<br>
			<button type="submit">确定</button>
			<button type="reset">重置</button>
		</form>		
	</div>
	
	<!-- 底栏 -->
	<div>
	
	</div>
</body>
</html>